<script type="text/javascript">
    $("#usuario-telefono").numeric();
    $("#usuario-identificacion").numeric();
</script>

<div class="tabbable tabs-right">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Usuario</a></li>
        <li><a href="#tab2" data-toggle="tab">Permisos</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <fieldset>
                <div class="control-group">
                    <label class="control-label" for="input01">Identificación:</label>
                    <div class="controls">
                        <input type="hidden" id="usuario-id" name="usuario-id" value="{{ usuarios.usuario_id }}" />
                        <input type="text" class="input-large" name="usuario-identificacion" id="usuario-identificacion" required="required" value="{{ usuarios.identificacion|default_if_none:"" }}"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input01">Nombres:</label>
                    <div class="controls">
                        <input type="text" class="input-large" name="usuario-nombres" id="usuario-nombres" required="required" value="{{ usuarios.usuario.first_name }}"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input01">Apellidos:</label>
                    <div class="controls">
                        <input type="text" class="input-large" name="usuario-apellidos" id="usuario-apellidos" required="required" value="{{ usuarios.usuario.last_name }}"/>
                    </div>
                </div>
               <div class="control-group">
                    <label class="control-label" for="input01">Telefono:</label>
                    <div class="controls">
                        <input type="text" class="input-large" name="usuario-telefono" id="usuario-telefono" required="required" value="{{ usuarios.telefono|default_if_none:"" }}"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input01">Email:</label>
                    <div class="controls">
                        <input type="email" class="input-large" name="usuario-email" id="usuario-email" required="required" value="{{ usuarios.usuario.email }}"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input01">Nombre de usuario:</label>
                    <div class="controls">
                        <input type="text" class="input-large" name="usuario-usuario" id="usuario-usuario" required="required" {%if usuarios.usuario.username %} readonly="readonly" {% endif %} value="{{ usuarios.usuario.username }}"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input01">Contraseña:</label>
                    <div class="controls">
                        <input type="password" class="input-large" name="usuario-contrasena" id="usuario-contrasena" {%if not usuarios.usuario.username %} required="required" {% endif %} value=""/>
                    </div>
                </div>
                
                <div class="control-group">
                    <label class="control-label" for="input01">Confirmar Contraseña:</label>
                    <div class="controls">
                        <input type="password" class="input-large" name="usuario-confirma" id="usuario-confirma" {%if not usuarios.usuario.username %} required="required" {% endif %} value=""/>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="tab-pane" id="tab2">
             <div class="control-group">
                <label class="control-label" for="input01">Perfil:</label>
                <div class="controls">
                    <select name="perfil" id="perfil">
                    
                    <option value="0">- SELECCIONE -</option>
                    {% for grupo in Grupos %}
                        <option value="{{ grupo.id }}" {% if grupo.id == Grupo.id %} selected="selected" {% endif %} >{{ grupo.name }}</option>
                    {% endfor %}
                    </select>
                </div>
            </div>
            <table class="table table-bordered table-striped table-highlight">
                <thead>
                    <tr>
                        <th width="5%"></th>
                        <th width="95%">Sede</th>
                    </tr>
                </thead>
                <tbody>
                    {% for lSede, vSede in Sedes.items %}
                    <tr>
                        <td><input type="checkbox" id="chk_{{vSede.sede.id}}" name="chk_{{vSede.sede.id}}" {% if vSede.permiso %} checked {% endif %}/></td>
                        <td>{{ vSede.sede.nombre }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
    </div>
</div>